<template>
  <div class="naviPane">
    <div class="leftNaviPane">
      <ul class="leftNaviUl">
        <li><a href="#">首页</a></li><!-- 超链接  到其它网页的路径标签 -->
        <li><a href="#">榜单</a>
          <ul class="subUl">
            <li><a href="#">华语榜</a></li>
            <li><a href="#">欧美榜</a></li>
          </ul>
        </li>
        <li><a href="#">下载客户端</a></li>
        <li><a href="#">更多</a>
          <ul class="subUl">
            <li><a href="#">电台</a></li>
            <li><a href="#">MV</a></li>
            <li><a href="#">歌手</a></li>
            <li><a href="#">歌单</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="rightNaviPane"></div>
  </div>

</template>

<script>
    export default {
        name: "Navi"
    }
</script>

<style lang="stylus">
  .naviPane
    margin:0 auto;
    width:1000px;
    height:55px;
    background-color: black;
    position: absolute;
    z-index:5;
    > div
      float:left;
      height:55px;
      line-height: 55px;
   .leftNaviPane
      width:500px;
      .leftNaviUl
         margin:0;
         > li
           list-style-type: none;
           float:left;
           color: white
           text-align: center
           > a
             text-decoration: none;
             color: white;/*四种状态：默认状态 a:link点击后状态; a:visited;悬停状态 a:hover;长按状态 a:active*/
             padding:0px 15px;
             height:55px;
             display: inline-block

         > li:hover > a
             color: #dafdf6;
             background-color: #0C8ED9;



         > li:hover >.subUl
             margin-top:5px;opacity:1;transition: margin-top 2s ease .1s,opacity 2s ease .1s
            > a:hover ~.subUl
              display: block;
            .subUl
               margin: 0;padding: 0;opacity:0; margin-top:20px;
               > li
                 list-style-type: none;background-color: black;width:62px;
                 > a
                   text-decoration: none;color: white
  &:after
    clear:both;content:'';display:block;
</style>
